<template>
	<div>
		<Row>
			<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
			<Input class="w-100" v-model="searchKey.roleName" placeholder="请输入角色名称" />
			</Col>
		</Row>
		<div class="p-1 d-flex justify-content-between">
			<Button class="m-1" type="error" shape="circle" @click="newRole" icon="md-add">新增</Button>
			<Button class="m-1" type="primary" shape="circle" @click="searchs" icon="ios-search">查询</Button>
		</div>
		<div>
			<div class="mt-1 d-none d-xl-block">
				<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
					<template slot-scope="{ row, index }" slot="aFlg">
						<span v-if="row.aflg">开</span>
						<span v-else>关</span>
					</template>
					<template slot-scope="{ row, index }" slot="action">
						<Button type="primary" size="small" style="margin-right: 5px"
							@click="show(row.roleCode)">详细</Button>
						<Button type="error" size="small" @click="remove(row.roleCode)">删除</Button>
					</template>
				</Table>
			</div>
			<div class="mt-1 d-xl-none">
				<Row>
					<Col class="p-1" v-for="(role, index) in tableInfo.data" :xs="24" :sm="24" :md="12" :lg="12">
					<div class="text-xss rounded shadow text-secondary p-1 bg-light">
						<div class="p-1 d-flex justify-content-between">
							<span>角色编号 </span><span>{{role.roleCode}}</span>
						</div>
						<div class="p-1 d-flex justify-content-between">
							<span>角色名 </span><span>{{role.name}}</span>
						</div>
						
						<div class="p-1 d-flex justify-content-end">
							<Button class="text-xss" type="error" size="small" @click="remove(role.roleCode)">删除</Button>
							<Button class="text-xss ml-2" type="primary" size="small"
								@click="show(role.roleCode)">详细</Button>

						</div>
					</div>
					</Col>
				</Row>
			</div>
			<div>
				<Page class="text-right mt-3" :page-size="tableInfo.pageSize" @on-change="pageSearch"
					:total="tableInfo.total" />
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				searchKey: {
					roleName: ""
				},
				pageInfo: {
					current: 1,
					total: 0,
					size: 10,
				},
				tableInfo: {
					columnInfo: [{
							title: "角色编号",
							key: "roleCode",
						},
						{
							title: "角色名称",
							key: "name",
						},
						{
							title: "状态",
							slot: "aFlg",
						},
						{
							title: "操作",
							slot: 'action',
							width: 150
						}
					],
					data: []
				}

			};
		},
		methods: {
			init: function() {
				this.pageInfo.current = 1;
				this.search();
			},
			newRole: function() {
				this.$router.detail.open({
					name: "role_new",
				});
			},
			show: function(roleCode) {
				this.$router.detail.open({
					name: "role_detail",
					params: {
						roleCode
					}
				});
			},
			search: function() {
				this.http.get({
					url: "/role/page",
					param: {
						current: this.pageInfo.current,
						roleName: this.searchKey.roleName
					}
				}).then(data => {
					this.pageInfo.current = data.current;
					this.pageInfo.total = data.total;
					this.pageInfo.size = data.size;
					this.tableInfo.data = data.records;
				});
			},
			searchs: function() {
				this.pageInfo.current = 1;
				this.search();
			},
			pageSearch: function(changedPage) {
				this.pageInfo.current = changedPage;
				this.search();
			},
			remove: function(roleCode) {

				this.message.confirm({
					title: "删除提示",
					content: "即将删除角色，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/role/info",
							param: {
								roleCode
							}
						}).then(data => {
							this.search();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
		},
		created: function() {
			this.init();
			
		},
	}
</script>

<style>
</style>